import { createApp } from 'vue'
import App from './App.vue'
// 引入基本样式
import '@/assets/less/index.less'
// 引入路由
import router from './router'
// 引入element-plus组件及样式(这是全部导入，内存占用比较大，推荐用按需导入，参考官网在vite或webpack中配置)
// 本项目使用全部引用
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入icon图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入pinia
import { createPinia } from 'pinia'
//引入mockjs
import "@/api/mock"
//全局挂载api，这样想用的时候就可以用了
import api from './api/api'
//引入store
import { useAllDataStore } from './stores'
//下面是路由守卫
function isRoute(to){
  let res = router.getRoutes()
  //返回一个布尔值
  return res.filter(item => item.path === to.path).length > 0
} 
router.beforeEach((to,from) => {
 //如果要跳转的不是login,且token不存在(可以通过不存在token判断出用户未登录)
  if(to.path !== "/login" && !store.state.token){
    return {name:"login"}
  }
  //如果路由记录不存在
  if(!isRoute(to)){
    return {name:"404"}
  }
})


// 创建 Vue 应用实例
const app = createApp(App)
const pinia = createPinia()

app.config.globalProperties.$api = api 

app.use(pinia)

//动态路由，一定要写在路由挂载前，写在pinia之后(store声明也要写在pinia后面)
const store = useAllDataStore()
store.addMenu(router,"refresh")

// icon图标的循环注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用 ElementPlus 和路由并挂载到 DOM
app.use(ElementPlus).use(router).mount('#app')
